/* pages/orderList/orderList.wxss */

page {
    background-color: #f4f4f4;
    color: #333;
}

/* 头部菜单 */

.order-tit {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-around;
    z-index: 999;
    width: 100%;
    height: 100 rpx;
    line-height: 100 rpx;
    background-color: #fff;
    border-bottom: 2 rpx solid #f4f4f4;
}

.order-tit text {
    display: block;
    font-size: 28 rpx;
    color: 999;
    width: 100 rpx;
    text-align: center;
}

.order-tit text.on {
    border-bottom: 4 rpx solid #eb2444;
    color: #eb2444;
}

/*  end 头部菜单 */

.main {
    margin-top: 100 rpx;
}

/* 商品列表 */

.prod-item {
    background-color: #fff;
    margin-top: 15 rpx;
    font-size: 28 rpx;
}

.prod-item .item-cont .prod-pic image {
    width: 180 rpx;
    height: 180 rpx;
}

.prod-item .order-num {
    padding: 20 rpx 30 rpx;
    display: flex;
    justify-content: space-between;
    font-size: 28 rpx;
}

.order-state {
    display: flex;
    align-items: center;
    font-size: 24 rpx;
}

.prod-item .item-cont .categories {
    white-space: nowrap;
}

.prod-item .item-cont {
    display: flex;
    align-items: center;
    padding: 20 rpx 30 rpx;
    border-radius: 10 rpx;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    background: #fafafa;
}

.prod-item .order-num .clear-btn {
    width: 32 rpx;
    height: 32 rpx;
    font-size: 0;
    vertical-align: top;
    margin-left: 42 rpx;
    position: relative;
}

.prod-item .order-num .clear-btn::after {
    content: " ";
    display: block;
    position: absolute;
    left: -10px;
    top: 0 rpx;
    width: 1px;
    height: 32 rpx;
    background: #ddd;
}

.prod-item .order-num .clear-btn .clear-list-btn {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.prod-item .item-cont .prod-pic {
    font-size: 0;
    display: inline-block;
    width: 160 rpx;
    height: 160 rpx;
    overflow: hidden;
    background: #fff;
    margin-right: 16 rpx;
}

.prod-item .item-cont .prod-pic image {
    width: 100%;
    height: 100%;
}

.prod-item .item-cont .prod-info {
    margin-left: 10 rpx;
    font-size: 28 rpx;
    width: 100%;
    position: relative;
    height: 160 rpx;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
}

.prod-item .item-cont .prod-info .prodname {
    font-size: 28 rpx;
    line-height: 36 rpx;
    max-height: 86 rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
}

.prod-item .item-cont .prod-info .prod-info-cont {
    color: #999;
    line-height: 40 rpx;
    margin-top: 10 rpx;
    font-size: 22 rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
}

.prod-item .total-num {
    text-align: right;
    padding: 20 rpx 30 rpx;
    font-size: 28 rpx;
}

.prod-item .price-nums .prodprice {
    color: #333;
    position: absolute;
    bottom: 0;
}

.prod-item .price-nums .prodcount {
    position: absolute;
    bottom: 5 rpx;
    right: 0;
    color: #999;
    font-family: verdana;
}

.prod-item .total-num .prodprice {
    display: inline-block;
    color: #333;
}

.prod-item .total-num .prodcount {
    margin-right: 20 rpx;
}

.prod-item .prod-foot {
    /* padding: 20rpx 30rpx; */
    border-top: 2 rpx solid #e6e6e6;
}

.prod-item .prod-foot .total {
    font-size: 25 rpx;
    margin-bottom: 20 rpx;
    padding-bottom: 20 rpx;
    border-bottom: 2 rpx solid #e9eaec;
}

.prod-item .prod-foot .btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.other-button-hover {
    background-color: blue;
}

.button-hover {
    background-color: red;
}

/** 添加自定义button点击态样式类**/

.button-hover {
    background-color: blue;
}

.button {
    margin-top: 20 rpx;
    margin-bottom: 20 rpx;
    margin-left: 10px;
    font-size: 26 rpx;
    background: #fff;
    padding: 10 rpx 30 rpx;
    border-radius: 80 rpx;
    border: 2 rpx solid #e1e1e1;
}

.button:last-child {
    margin-right: 10 rpx;
}

.button.warn {
    color: #eb2444;
    border-color: #eb2444;
}

/* end 商品列表 */

.empty {
    font-size: 24 rpx;
    margin-top: 100 rpx;
    text-align: center;
    color: #999;
    height: 300 rpx;
    line-height: 300 rpx;
}

/* 根据状态显示不同的颜色 */

.order-state .order-sts.red {
    color: #eb2444;
}

.order-state .order-sts.gray {
    color: #999;
}
